<template>
  <div>
    <el-row>
      <el-col :span="6" >
        <el-button size="small" icon="el-icon-refresh" type="text" @click="queryKeys" />
        <el-button size="small" type="text" icon="el-icon-plus" @click="expandAll"  />
        <el-button size="small" type="text" icon="el-icon-minus" @click="collapseAll" />

        <div style="height: 76vh;overflow-y: scroll;">
          <el-tree :data="keys" :expand-on-click-node="false" :props="defaultProps" @node-click="clickNode" ref="treeKey">
            <div slot-scope="{ node, data }" class="custom-tree-node">
              <el-tooltip :content="data.key">
                <span class="node-text" >{{ data.name }}</span>
              </el-tooltip>
              <span class="" style="flex: 1;text-align: right" >
                <el-button title="复制 KEY" type="text" icon="el-icon-document-copy" @click="copyKey(data,$event)" />
                <el-button title="删除" type="text" icon="el-icon-delete" @click="delKeyPattern(data)" />
              </span>

            </div>
          </el-tree>
        </div>

      </el-col>

      <el-col :span="17" class="margin-left">
        <redis-serializer-chose ref="serializerChose" v-model="input.serializerParam" />

        <datashow ref="datashow" :conn-param="connParam" :key-row="keyRow" :serializer-param="input.serializerParam" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import redis from '@/api/redis'
import datashow from '@/views/monitor/redis/datashow'
import RedisSerializerChose from '@/views/monitor/redis/RedisSerializerChose'
import clip from '@/utils/clipboard'

export default {
  name: 'Treekey',
  components: { RedisSerializerChose, datashow },
  props: {
    connParam: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      keys: [],
      defaultProps: {
        children: 'childs',
        label: 'name'
      },
      input: {
        serializerParam: {
          keySerializer: 'string',
          value: 'string',
          hashKey: 'string',
          hashValue: 'string',
          classloaderName: null
        }
      },
      keyRow: {}
    }
  },
  methods: {
    init() {
      this.queryKeys()
    },
    queryKeys() {
      redis.keyTree(this.connParam).then(res => {
        // console.log(res.data)
        this.keys = res.data
      })
    },
    clickNode(data, node, el) {
      if (data.folder) {
        // 点击目录是无效的
        return
      }
      // 先查询 key 的信息
      redis.keyInfo(this.connParam, data.key, this.input.serializerParam).then(res => {
        this.keyRow = res.data

        this.$refs.datashow.loadAllData()
      })
    },
    copyKey(data, event) {
      const keyInfo = data.folder ? data.name + ':*' : data.key
      clip(keyInfo, event)
    },
    delKeyPattern(data) {
      const keyInfo = data.folder ? data.name + ':*' : data.key
      this.$confirm('再次确认,将删除 ' + keyInfo + ' 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
        redis.delKeyPattern(this.connParam, keyInfo).then(res => {
          this.$message('成功删除 key 数量:' + res.data)
          this.init()
        })
      }).catch(() => {
      })
    },
    expandAll(){
      let treeKey = this.$refs['treeKey']
      this.expandNode(treeKey.store.root,true)
    },
    collapseAll(){
      let treeKey = this.$refs['treeKey']
      this.expandNode(treeKey.store.root,false)
    },
    expandNode(node,expand){
      node.expanded = expand;
      for (let i = 0; i < node.childNodes.length; i++) {
        node.childNodes[i].expanded = expand
        if (node.childNodes[i].childNodes.length > 0) {
          this.expandNode(node.childNodes[i],expand)
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ .custom-tree-node{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  padding: 0 10px 0 2px;
}
.custom-tree-node .node-text{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
</style>
